<template>
    <el-card shadow="never">
        <div slot="header">动态表单(input)</div>
        <DynamicForm :schema="schema" :formData="formData"></DynamicForm>
        <div class="markdown-body">
            <CodeTpl></CodeTpl>
        </div>
    </el-card>
</template>

<script>
import CodeTpl from './md/input.md';

export default {
    components: {
        CodeTpl
    },
    data() {
        return {
            schema: {
                properties: {
                    name: {
                        label: '名称',
                        widget: 'input',
                        col: {
                            span: 8
                        },
                        ui: {
                            clearable: true,
                            placeholder: '请输入'
                        }
                    },
                    xh: {
                        label: '喜好',
                        widget: 'input',
                        col: {
                            span: 8
                        },
                        ui: {
                            disabled: true,
                            placeholder: '请输入'
                        }
                    },
                    pwd: {
                        label: '密码',
                        widget: 'input',
                        col: {
                            span: 8
                        },
                        ui: {
                            type: 'password',
                            showPassword: true,
                            placeholder: '请输入'
                        }
                    },
                    tel: {
                        label: '电话',
                        widget: 'input',
                        ui: {
                            readonly: true,
                            placeholder: '请输入'
                        }
                    },
                    jj: {
                        label: '简介',
                        widget: 'input',
                        ui: {
                            type: 'textarea',
                            maxlength: 30,
                            showWordLimit: true,
                            autosize: { minRows: 2, maxRows: 6 },
                            placeholder: '请输入'
                        }
                    }
                },
                ui: {
                    labelWidth: 'auto'
                },
                grid: {
                    row: {
                        gutter: 20
                    },
                    col: {
                        span: 12
                    }
                }
            },
            formData: {
                xh: '被禁用',
                tel: '只读'
            }
        }
    },
}
</script>

<style>

</style>